.block, .expression{
    font-family: Helvetica;
    font-size: 10px;
    color: #000;
}

.block{
    margin-bottom: -8px;
}

.trigger{
    position: relative;
    padding-left: 25px;
    padding-top: 3px;
    height: 31px;
    width: 150px;
    display: inline-block;
    background: transparent url(../images/trigger_blue.png) top left no-repeat;
}

.trigger > .right{
    position: absolute;
    width: 5px;
    height: 31px;
    right: -5px;
    top: 0px;
    background: transparent url(../images/trigger_blue.png) -995px 0px no-repeat;
}

.step{
    position: relative;
/*    padding-top: 31px; */
    padding-left: 31px;
    padding-right: 10px;
    padding-top: 3px;
    height: 31px;
    background: transparent url(../images/block_blue.png) top left no-repeat;
}

.step > .step{
    top: -4px;
}

.step > .right{
    position: absolute;
    width: 5px;
    height: 31px;
    right: -5px;
    top: 0px;
    background: transparent url(../images/block_blue.png) -995px 0px no-repeat;
}

.intexpr, .intvalue{
    position: relative;
    padding-top: 3px;
    height: 25px;
    padding-left: 12px;
    background: transparent url(../images/intexpr_blue.png) top left no-repeat;
}

.intexpr > .right, .intvalue > .right{
    position: absolute;
    width: 12px;
    height: 25px;
    right: -12px;
    top: 0px;
    background: transparent url(../images/intexpr_blue.png) -988px 0px no-repeat;
}

.boolexpr, .boolvalue{
    position: relative;
    padding-top: 3px;
    height: 25px;
    padding-left: 12px;
    background: transparent url(../images/boolexpr_blue.png) top left no-repeat;
}

.boolexpr > .right, .boolvalue > .right{
    position: absolute;
    width: 12px;
    height: 25px;
    right: -12px;
    top: 0px;
    background: transparent url(../images/boolexpr_blue.png) -988px 0px no-repeat;
}



.label{
    display: block;
    position: relative;
    top: 2px;
    white-space: nowrap;
}

.label *{
    white-space: nowrap;
}

input.int, input.bool{
    position: relative;
    text-align: center;
    width: 25px;
    height: 10px;
    font-family: fixed;
    font-size: 10px;
}

input.int{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

select.blocks_menu{
    -webkit-appearance: none;
    text-align: center;
}
    
.loop{
    position: relative;
    width: 120px;
    margin-top: 22px;
    margin-left: 44px;
    margin-bottom: 26px;
}

.loop > .label{
    top: -17px;
}
.loop > .top_left{
    position: absolute;
    left: -44px;
    top: -22px;
    width: 44px;
    height: 26px;
    background: transparent url(../images/container_blue.png) top left no-repeat;
}

.loop > .top_right{
    position: absolute;
    right: -5px;
    top: -22px;
    width: 5px;
    height: 22px;
    background: transparent url(../images/container_blue.png) top right no-repeat;
}
.loop > .bottom_left{
    position: absolute;
    left: -44px;
    bottom: -26px;
    width: 44px;
    height: 26px;
    background: transparent url(../images/container_blue.png) bottom left no-repeat;
}
.loop > .bottom_right{
    position: absolute;
    right: -5px;
    bottom: -26px;
    width: 5px;
    height: 26px;
    background: transparent url(../images/container_blue.png) bottom right no-repeat;
}
.loop > .top{
    position: absolute;
    left: 0px;
    top: -22px;
    width: 100%;
    height: 22px;
    background: transparent url(../images/container_blue.png) -44px 0px no-repeat;
}
.loop > .bottom{
    position: absolute;
    left: 0px;
    bottom: -26px;
    width: 100%;
    height: 26px;
    background: transparent url(../images/container_blue.png) -44px -985px no-repeat;
}
.loop > .left{
    position: absolute;
    left: -44px;
    top: 0px;
    width: 22px;
    height: 100%;
    background: transparent url(../images/container_blue.png) 0px -22px no-repeat;
}

.loop > .loop, .loop > .step{
    left: -28px;
}

.step.blue, .step.blue .right{background-image: url(../images/block_blue.png);}
.trigger.blue, .trigger.blue .right{background-image: url(../images/trigger_blue.png);}
.intexpr.blue, .intexpr.blue .right{background-image: url(../images/intexpr_blue.png);}
.boolexpr.blue, .boolexpr.blue .right{background-image: url(../images/boolexpr_blue.png);}
.loop.blue .top_left, .loop.blue .top, .loop.blue .top_right, .loop.blue .left, .loop.blue .bottom_left, .loop.blue .bottom, .loop.blue .bottom_right{background-image: url(../images/container_blue.png);}

.step.blueviolet, .step.blueviolet .right{background-image: url(../images/block_blueviolet.png);}
.trigger.blueviolet, .trigger.blueviolet .right{background-image: url(../images/trigger_blueviolet.png);}
.intexpr.blueviolet, .intexpr.blueviolet .right{background-image: url(../images/intexpr_blueviolet.png);}
.boolexpr.blueviolet, .boolexpr.blueviolet .right{background-image: url(../images/boolexpr_blueviolet.png);}
.intvalue.blueviolet, .intvalue.blueviolet .right{background-image: url(../images/intexpr_blueviolet.png);}
.boolvalue.blueviolet, .boolvalue.blueviolet .right{background-image: url(../images/boolexpr_blueviolet.png);}
.loop.blueviolet .top_left, .loop.blueviolet .top, .loop.blueviolet .top_right, .loop.blueviolet .left, .loop.blueviolet .bottom_left, .loop.blueviolet .bottom, .loop.blueviolet .bottom_right{background-image: url(../images/container_blueviolet.png);}

.step.cyan, .step.cyan .right{background-image: url(../images/block_cyan.png);}
.trigger.cyan, .trigger.cyan .right{background-image: url(../images/trigger_cyan.png);}
.intexpr.cyan, .intexpr.cyan .right{background-image: url(../images/intexpr_cyan.png);}
.boolexpr.cyan, .boolexpr.cyan .right{background-image: url(../images/boolexpr_cyan.png);}
.intvalue.cyan, .intvalue.cyan .right{background-image: url(../images/intexpr_cyan.png);}
.boolvalue.cyan, .boolvalue.cyan .right{background-image: url(../images/boolexpr_cyan.png);}
.loop.cyan .top_left, .loop.cyan .top, .loop.cyan .top_right, .loop.cyan .left, .loop.cyan .bottom_left, .loop.cyan .bottom, .loop.cyan .bottom_right{background-image: url(../images/container_cyan.png);}

.step.gold, .step.gold .right{background-image: url(../images/block_gold.png);}
.trigger.gold, .trigger.gold .right{background-image: url(../images/trigger_gold.png);}
.intvalue.gold, .intvalue.gold .right{background-image: url(../images/intexpr_gold.png);}
.boolvalue.gold, .boolvalue.gold .right{background-image: url(../images/boolexpr_gold.png);}
.loop.gold .top_left, .loop.gold .top, .loop.gold .top_right, .loop.gold .left, .loop.gold .bottom_left, .loop.gold .bottom, .loop.gold .bottom_right{background-image: url(../images/container_gold.png);}

.step.green, .step.green .right{background-image: url(../images/block_green.png);}
.trigger.green, .trigger.green .right{background-image: url(../images/trigger_green.png);}
.intexpr.green, .intexpr.green .right{background-image: url(../images/intexpr_green.png);}
.boolexpr.green, .boolexpr.green .right{background-image: url(../images/boolexpr_green.png);}
.intvalue.green, .intvalue.green .right{background-image: url(../images/intexpr_green.png);}
.boolvalue.green, .boolvalue.green .right{background-image: url(../images/boolexpr_green.png);}
.loop.green .top_left, .loop.green .top, .loop.green .top_right, .loop.green .left, .loop.green .bottom_left, .loop.green .bottom, .loop.green .bottom_right{background-image: url(../images/container_green.png);}

.step.lawngreen, .step.lawngreen .right{background-image: url(../images/block_lawngreen.png);}
.trigger.lawngreen, .trigger.lawngreen .right{background-image: url(../images/trigger_lawngreen.png);}
.intexpr.lawngreen, .intexpr.lawngreen .right{background-image: url(../images/intexpr_lawngreen.png);}
.boolexpr.lawngreen, .boolexpr.lawngreen .right{background-image: url(../images/boolexpr_lawngreen.png);}
.intvalue.lawngreen, .intvalue.lawngreen .right{background-image: url(../images/intexpr_lawngreen.png);}
.boolvalue.lawngreen, .boolvalue.lawngreen .right{background-image: url(../images/boolexpr_lawngreen.png);}
.loop.lawngreen .top_left, .loop.lawngreen .top, .loop.lawngreen .top_right, .loop.lawngreen .left, .loop.lawngreen .bottom_left, .loop.lawngreen .bottom, .loop.lawngreen .bottom_right{background-image: url(../images/container_lawngreen.png);}

.step.magenta, .step.magenta .right{background-image: url(../images/block_magenta.png);}
.trigger.magenta, .trigger.magenta .right{background-image: url(../images/trigger_magenta.png);}
.intexpr.magenta, .intexpr.magenta .right{background-image: url(../images/intexpr_magenta.png);}
.boolexpr.magenta, .boolexpr.magenta .right{background-image: url(../images/boolexpr_magenta.png);}
.intvalue.magenta, .intvalue.magenta .right{background-image: url(../images/intexpr_magenta.png);}
.boolvalue.magenta, .boolvalue.magenta .right{background-image: url(../images/boolexpr_magenta.png);}
.loop.magenta .top_left, .loop.magenta .top, .loop.magenta .top_right, .loop.magenta .left, .loop.magenta .bottom_left, .loop.magenta .bottom, .loop.magenta .bottom_right{background-image: url(../images/container_magenta.png);}

.step.mediumblue, .step.mediumblue .right{background-image: url(../images/block_mediumblue.png);}
.trigger.mediumblue, .trigger.mediumblue .right{background-image: url(../images/trigger_mediumblue.png);}
.intexpr.mediumblue, .intexpr.mediumblue .right{background-image: url(../images/intexpr_mediumblue.png);}
.boolexpr.mediumblue, .boolexpr.mediumblue .right{background-image: url(../images/intexpr_mediumblue.png);}
.intvalue.mediumblue, .intvalue.mediumblue .right{background-image: url(../images/intexpr_mediumblue.png);}
.boolvalue.mediumblue, .boolvalue.mediumblue .right{background-image: url(../images/intexpr_mediumblue.png);}
.loop.mediumblue .top_left, .loop.mediumblue .top, .loop.mediumblue .top_right, .loop.mediumblue .left, .loop.mediumblue .bottom_left, .loop.mediumblue .bottom, .loop.mediumblue .bottom_right{background-image: url(../images/container_mediumblue.png);}

.step.orangered, .step.orangered .right{background-image: url(../images/block_orangered.png);}
.trigger.orangered, .trigger.orangered .right{background-image: url(../images/trigger_orangered.png);}
.intexpr.orangered, .intexpr.orangered .right{background-image: url(../images/intexpr_orangered.png);}
.boolexpr.orangered, .boolexpr.orangered .right{background-image: url(../images/boolexpr_orangered.png);}
.intvalue.orangered, .intvalue.orangered .right{background-image: url(../images/intexpr_orangered.png);}
.boolvalue.orangered, .boolvalue.orangered .right{background-image: url(../images/boolexpr_orangered.png);}
.loop.orangered .top_left, .loop.orangered .top, .loop.orangered .top_right, .loop.orangered .left, .loop.orangered .bottom_left, .loop.orangered .bottom, .loop.orangered .bottom_right{background-image: url(../images/container_orangered.png);}

.step.seagreen, .step.seagreen .right{background-image: url(../images/block_seagreen.png);}
.trigger.seagreen, .trigger.seagreen .right{background-image: url(../images/trigger_seagreen.png);}
.intexpr.seagreen, .intexpr.seagreen .right{background-image: url(../images/intexpr_seagreen.png);}
.boolexpr.seagreen, .boolexpr.seagreen .right{background-image: url(../images/boolexpr_seagreen.png);}
.intvalue.seagreen, .intvalue.seagreen .right{background-image: url(../images/intexpr_seagreen.png);}
.boolvalue.seagreen, .boolvalue.seagreen .right{background-image: url(../images/boolexpr_seagreen.png);}
.loop.seagreen .top_left, .loop.seagreen .top, .loop.seagreen .top_right, .loop.seagreen .left, .loop.seagreen .bottom_left, .loop.seagreen .bottom, .loop.seagreen .bottom_right{background-image: url(../images/container_seagreen.png);}



